<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米服务</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="js/head.js"> </script>
    <link rel="stylesheet" href="css/serve.css">
</head>
<body>
    <!-- head start -->
    <div id="head"></div>
    <!-- serve start -->
    <div class="container">
        <p class="shouye">首页&nbsp;/&nbsp;服务支持</p>
        <div class="lunbo ">
            <div id="list">
                <img src="images/fuwu-header-1.jpg" alt="">
                <img src="images/wuzhounian.png" alt="">
            </div>    
            <div id="prev"></div>
            <div id="next"></div> 
        </div>
        <div class="pattern">
            <p>你的那款商品遇到了问题？</p>
            <div class="ta-c">
                <img src="images/goodsList01.jpg" alt="">
                <p>小米手机/红米手机</p>
            </div>
            <div class="ta-c">
                <img src="images/goodsList02.jpg" alt="">
                <p>小米盒子</p>
            </div>
            <div class="ta-c">
                <img src="images/goodsList03.jpg" alt="">
                <p>小米电视</p>
            </div>
            <div class="ta-c">
                <img src="images/goodsList05.jpg" alt="">
                <p>其他配件类</p>
            </div>
        </div>
        <div class="problem">
            <p>常见问题</p>
            <div class="problem-class">
                <div>
                    <img src="images/index_01.jpg" alt="">
                    <p>资源下载</p>
                </div>
                <div>
                    <img src="images/index_02.jpg" alt="">
                    <p>售后服务</p>
                </div>
                <div>
                    <img src="images/index_03.jpg" alt="">
                    <p>账户密码管理</p>
                </div>
                <div>
                    <img src="images/index_04.jpg" alt="">
                    <p>小米VIP认证</p>
                </div>
                <div>
                    <img src="images/index_04.jpg" alt="">
                    <p>预约小米之家面对面服务</p>
                </div><div>
                    <img src="images/index_06.jpg" alt="">
                    <p>查询物流</p>
                </div>
                <div>
                    <img src="images/index_07.jpg" alt="">
                    <p>商品防伪查询</p>
                </div>
                <div class="pr search">
                    <input type="text" name="" id="" value="请输入您需要提问的问题">
                    <button ></button>
                </div>
            </div>
            <div class="serve row">
                <span>更多</span>
                <p>您需要什么样的服务</p>
                <ul>
                    <li>热门问题</li>
                    <li><a href="#">5月12日开放购买活动</a></li>
                    <li><a href="#">小米手机Note产品特性综述</a></li>
                    <li><a href="#">手机参数的对比</a></li>
                    <li><a href="#">我购买的东西什么时候发货？</a></li>
                </ul>
                <ul>
                    <li>如何在小米网购物</li>
                    <li><a href="#">了解购物流程</a></li>
                    <li><a href="#">如何在线支付</a></li>
                    <li><a href="#">如何参加开放购买</a></li>
                    <li><a href="#">如何修改订单信息</a></li>
                </ul>
                <ul>
                    <li>快递物流服务</li>
                    <li><a href="#">查询物流信息</a></li>
                    <li><a href="#">7个工作日内发货保障</a></li>
                </ul>
                <ul>
                    <li>实体店卖面对面服务</li>
                    <li><a href="#">预约小米之家门店服务</a></li>
                    <li><a href="#">身边的小米之家</a></li>
                    <li><a href="#">附近授权维修网点</a></li>
                    <li><a href="#">1小时快修服务</a></li>
                </ul>
                <ul>
                    <li>售后服务申请</li>
                    <li><a href="#">7天无理由退货</a></li>
                    <li><a href="#">15天免费换货</a></li>
                    <li><a href="#">退换货进度查询</a></li>
                    <li><a href="#">领取快递补偿</a></li>
                    <li><a href="#">维修进度查询</a></li>
                </ul>
                <ul>
                    <li>小米特色服务</li>
                    <li><a href="#">建议留言</a></li>
                    <li><a href="#">小米云服务</a></li>
                    <li><a href="#">小米VIP认证</a></li>
                    <li><a href="#">举报假货</a></li>
                    <li><a href="#">小米移动电源鉴别宝典</a></li>
                    <li><a href="#">小米活塞耳机鉴别宝典</a></li>
                    <li><a href="#">小米官方授权经销商</a></li>
                </ul>
            </div>
            <div class="kefu">
                <div>
                    <img src="images/index-customers_01.jpg" alt="" class="photo">
                    <div class="customers ta-c">
                        <p>在线咨询客服</p>
                        <p>7x24小时为您服务</p>
                    </div>
                </div>
                <div>
                    <img src="images/index-customers_02.jpg" alt="" class="photo">
                    <div class="customers ta-c">
                        <p>在线咨询客服</p>
                        <p>7x24小时为您服务</p>
                    </div>
                </div>
                <div>
                    <img src="images/index-customers-03.jpg" alt="" class="photo">
                    <div class="customers ta-c">
                        <p>在线咨询客服</p>
                        <p>7x24小时为您服务</p>
                    </div>
                </div>
                <div>
                    <img src="images/index-customers_04.jpg" alt="" class="photo">
                    <div class="customers ta-c">
                        <p>在线咨询客服</p>
                        <p>7x24小时为您服务</p>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
    <script>
        $(function(){
            var index = 0;
            $("#next").click(function(){
                index++;
                if(index>1){
                    index=0;
                }
                $("#list img").eq(index).fadeIn(300).siblings().fadeOut(300);
            })
            $("#prev").click(function(){
                index--;
                if(index<0){
                    index=1;                
                    }
                $("#list img").eq(index).fadeIn(300).siblings().fadeOut(300);
            })
            var timer;
            var clear = document.getElementById("clear");
            function stop(){
                clearInterval(timer)
            }
            function play(){
                timer = setInterval(function(){
                    $("#next").click()
                },1000)
            }
            $(".lunbo").mouseover(function(){
                stop();
            })
            $(".lunbo").mouseout(function(){
                play();
            })
            play();
        })
    </script>
    <!-- foot start -->
    <div id="foot"></div>
</body>
</html>